<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="font-bold">管理员信息列表</div>
            </template>
            <el-form :model="queryFormData" :inline="true">
                <el-form-item label="姓名">
                    <el-input placeholder="请输入姓名" v-model="queryFormData.admin_name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="queryFormData.admin_sex" placeholder="请选择性别">
                        <el-option v-for="item in [{ value: '男', label: '男' }, { value: '女', label: '女' }]"
                            :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled" />
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input placeholder="请输入手机号" v-model="queryFormData.admin_tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input placeholder="请输入邮箱" v-model="queryFormData.admin_email"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryData" :loading="isLoading" :loading-icon="Eleme">
                        <el-icon>
                            <Search />
                        </el-icon>
                        查询
                    </el-button>
                </el-form-item>
            </el-form>
            <div v-loading="isLoading">
                <el-table :data="resultData.listData" border stripe max-height="550">
                    <el-table-column align="center" width="100" label="ID" prop="id"></el-table-column>
                    <el-table-column label="姓名" prop="admin_name"></el-table-column>
                    <el-table-column align="center" width="110" label="性别">
                        <template #default="{ row }">
                            <el-tag v-if="row.admin_sex == '男'">男</el-tag>
                            <el-tag type="warning" v-else>女</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="手机号" prop="admin_tel"></el-table-column>
                    <el-table-column label="邮箱" prop="admin_email"></el-table-column>
                    <el-table-column label="头像">
                        <template #default="{ row }">
                            <el-image :src="baseURL + row.admin_photo" alt="" class="w-[50px] h-[50px]" fit="cover"
                                :preview-src-list="[baseURL + row.admin_photo]" :preview-teleported="true" />
                        </template>
                    </el-table-column>
                    <el-table-column label="类型">
                        <template #default="{ row }">
                            <el-button type="success" v-if="row.admin_type == 0">普通管理员</el-button>
                            <el-button type="danger" v-else>超级管理员</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180" align="center">
                        <template #default="{ row }">
                            <el-button type="warning" size="small"
                                @click="$router.replace({ name: 'EditAdminInfo', params: { id: row.id } })">
                                <el-icon>
                                    <EditPen />
                                </el-icon>
                                编辑
                            </el-button>
                            <el-popconfirm confirm-button-text="是" cancel-button-text="否" :icon="InfoFilled"
                                icon-color="red" title="确定要删除吗?" @confirm="delCurrentItem(row.id)"
                                @cancel="cancelEvent">
                                <template #reference>
                                    <el-button :plain="true" type="danger" size="small" @click="visible = true">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                        删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 页码 -->
                <div class="flex flex-row justify-between items-center mt-[10px]">
                    <div class="text-[14px]">当前第{{ queryFormData.pageIndex }}页，共{{ resultData.pageCount }}页，共{{
                            resultData.totalCount
                    }}条</div>
                    <el-pagination background layout="prev, pager, next" :total="resultData.totalCount"
                        @current-change="currentChange" />
                </div>
            </div>
        </el-card>
    </page-view>
</template>

<script setup>
import { reactive, ref, onMounted, inject } from "vue"
import { InfoFilled, Search, Eleme, EditPen, Delete } from "@element-plus/icons-vue"
import API from "../../utils/API";
import { ElMessage } from 'element-plus'
const visible = ref(false)



const baseURL = inject("baseURL");
// 绑定查询功能的input
const queryFormData = reactive({
    admin_name: "",
    admin_sex: "",
    admin_tel: "",
    admin_email: "",
    pageIndex: 1
})
// 加载功能的响应式数据
const isLoading = ref(false)

// 存放请求数据的list
const resultData = reactive({
    listData: [],
    pageCount: 0,
    pageStart: 0,
    totalCount: 0
})

// 请求数据
const queryData = () => {
    isLoading.value = true;
    API.adminInfo.getListByPage(queryFormData)
        .then(result => {
            // console.log(result);
            resultData.listData = result.listData;
            resultData.pageCount = result.pageCount;
            resultData.pageStart = result.pageStart;
            resultData.totalCount = result.totalCount;
        }).finally(() => {
            isLoading.value = false;
        })
}
// 分页功能点击下一页的index
const currentChange = (index) => {
    queryFormData.pageIndex = index;
    queryData();
}


// 删除功能
const delCurrentItem = (id) => {
    // console.log(id);
    API.adminInfo.deleteById(id)
        .then(() => {
            ElMessage.success('删除成功')
            queryData();
        }).catch(() => {
            ElMessage.error('删除失败')
        })
}
// 取消按钮的回调
const cancelEvent = () => {
    console.log("");
}

onMounted(() => {
    queryData();
})

</script>


<style scoped>

</style>